<template>
  <el-dialog
    :title="`${dialogType === 'edit' ? '编辑' : '新增'}解决问题`"
    :visible.sync="customVisible"
    width="50%"
    :before-close="handleCancel"
  >
    <el-form class="basic-form" ref="form" :model="customData" label-width="120px" :rules="rules">
      <el-form-item label="解决问题标题" prop="solveQuestionTitle">
        <el-input v-model="customData.solveQuestionTitle" clearable />
      </el-form-item>
      <el-form-item label="是否启用" prop="isEnable">
        <el-select v-model="customData.isEnable" placeholder="请选择" clearable>
          <el-option
            v-for="item in isEnableOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="序号" prop="sortNumber">
        <el-input-number v-model="customData.sortNumber" controls-position="right" :min="0" clearable></el-input-number>
      </el-form-item>
      <el-form-item label="关联产品服务" prop="productServiceId">
        <el-select
          v-model="customData.productServiceId"
          placeholder="请选择"
          :remote-method="getProductServiceList"
          clearable
          filterable
          remote
        >
          <el-option
            v-for="item in productServiceList"
            :key="item.productServiceId"
            :label="`${item.chineseTitle} - ${item.englishTitle}`"
            :value="item.productServiceId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图片" prop="imageId">
        <SingleImageUpload v-model="customData.imageId" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button v-waves type="primary" @click="handleOk()">确认</el-button>
      <el-button v-waves @click="handleCancel()">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import SingleImageUpload from '@/components/Upload/SingleImage';
import * as productHttp from '@/api/product';
import { isEnableOptions, solutionSolveOptions } from '@/utils/config';

export default {
  name: 'product-solve-question',
  components: { SingleImageUpload },
  props: {
    title: {
      type: String,
      default: '弹框'
    },
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: [Object, undefined]
    }
  },
  data() {
    return {
      dialogType: 'add', // add / edit
      rules: {
        solveQuestionTitle: [{ required: true, message: '请输入解决问题标题', trigger: 'blur' }],
        isEnable: [{ required: true, message: '请选择是否启用', trigger: 'change' }],
        sortNumber: [{ required: true, message: '请输入序号', trigger: ['change', 'blur'] }],
        imageId: [{ required: true, message: '请上传图片', trigger: ['change'] }],
        productServiceId: [{ required: true, message: '请选择产品服务', trigger: 'change' }]
      },
      isEnableOptions: isEnableOptions,
      solutionSolveOptions,

      // 关联产品列表
      productServiceList: []
    }
  },
  computed: {
    customVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit('update:visible', value);
      }
    },
    customData: {
      get() {
        return this.data || {};
      },
      set(value) {
        this.$emit('update:data', value);
      }
    }
  },
  created() {
    this.getProductServiceList();
  },
  methods: {
    handleCancel() {
      this.customVisible = false;
      this.customData = {};
      this.$refs['form'].resetFields();
    },

    // 确认
    handleOk() {
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false;

        try {
          let res;
          if (this.customData.solveQuestionId === void 0) {
            res = await productHttp.addSolveQuestion({ ...this.customData });
          } else {
            res = await productHttp.updateSolveQuestion({ ...this.customData });
          }

          this.$message.success('提交成功');
          this.$emit('loading', res);
          this.handleCancel();
        } catch(e) {
          console.log('edit solution handleOk: ', e);
          this.$message.error('提交失败');
        }
      });
    },

    // 获取解决方案
    async getProductServiceList(query = '') {
      try {
        this.loading = true;
        const nextParams = {
          SolutionName: query,
          IsEnable: 1,
          PageIndex: 1,
          PageSize: 20
        };

        const res = await productHttp.getProductServiceList(nextParams);

        this.productServiceList = res.data.data;
      } catch (e) {
        this.productServiceList = [];
        console.log('Search Result Table: uid: ', this.uid, '\n', e);
      } finally {
        this.loading = false;
      }
    }
  },
  watch: {
    data(value) {
      // 默认有 __ob__ 值
      if (Object.getOwnPropertyNames(value).length > 1) {
        this.dialogType = 'edit';
      } else {
        this.dialogType = 'add';
      }
    }
  }
}
</script>
